import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, TextInput, TouchableOpacity, Keyboard, ScrollView } from 'react-native'
import { Px, Base64Util } from '../../utils'
import { AssetImages, ActionTypes } from '../../constants'
import { SafeAreaView } from 'react-navigation'
import { Toast } from 'antd-mobile-rn'
import { NavigationHeader } from '../../components';
import ImagePicker from 'react-native-image-picker'

const options = {
    title: '选择图片',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择头像',
    maxHeight: 100,
    maxWidth: 100,
    storageOptions: {
        skipBackup: true,
        path: 'images',
    },
}

class AddPet extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {
            headImg: '',
            name: '',
            type: '',
            breed: '', // 品种
            age: 0,
            birthday: '',
            description: '',
            tag: '',
        }
    }

    // render part
    render() {
        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
                <NavigationHeader
                    title="添加宠物"
                    navigation={this.props.navigation}
                />
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => Keyboard.dismiss()}
                    style={{ flex: 1 }}>
                    <ScrollView style={{ flex: 1 }}>
                        <TouchableOpacity
                            onPress={() => {
                                // add image
                                this._selectImage()
                            }}
                            style={{ width: '100%', alignItems: 'center' }}>
                            <Image
                                style={styles.petImage}
                                source={AssetImages.DEFAULT_PET_IMAGE}
                            />
                        </TouchableOpacity>
                    
                    <View style={[styles.lineItem,{marginTop: Px(30)}]}>
                        <Text>名称</Text>
                        <TextInput
                            placeholder="请输入"
                            onChangeText={(text) => {
                                this.setState({
                                    name: text
                                })
                            }}
                            onBlur={() => {
                                Keyboard.dismiss()
                            }}
                            style={styles.inputStyle}
                        />
                    </View>
                    <View style={styles.lineItem}>
                        <Text>类别</Text>
                        <TextInput
                            placeholder="请输入"
                            onChangeText={(text) => {
                                this.setState({
                                    type: text
                                })
                            }}
                            style={styles.inputStyle}
                        />
                    </View>
                    <View style={styles.lineItem}>
                        <Text>品种</Text>
                        <TextInput
                            onChangeText={(text) => {
                                this.setState({
                                    breed: text
                                })
                            }}
                            placeholder="请输入"
                            style={styles.inputStyle}
                        />
                    </View>
                    <View style={styles.lineItem}>
                        <Text>年龄</Text>
                        <TextInput
                            onChangeText={(text) => {
                                this.setState({
                                    age: text
                                })
                            }}
                            placeholder="请输入"
                            style={styles.inputStyle}
                        />
                    </View>
                    <View style={styles.lineItem}>
                        <Text>生日</Text>
                        <TextInput
                            onChangeText={(text) => {
                                this.setState({
                                    birthday: text
                                })
                            }}
                            placeholder="请输入"
                            style={styles.inputStyle}
                        />
                    </View>
                    <View style={styles.lineItem}>
                        <Text>描述</Text>
                        <TextInput
                            onChangeText={(text) => {
                                this.setState({
                                    description: text
                                })
                            }}
                            placeholder="请输入"
                            style={styles.inputStyle}
                        />
                    </View>
                    <View style={styles.lineItem}>
                        <Text>标签</Text>
                        <TextInput
                            onChangeText={(text) => {
                                this.setState({
                                    tag: text
                                })
                            }}
                            placeholder="请输入"
                            style={styles.inputStyle}
                        />
                    </View>
                    <TouchableOpacity
                        onPress={() => {
                            this._addPet()
                        }}
                        style={{ width: '100%', alignItems: 'center'}}
                    >
                        <View style={{ width: Px(160), height: Px(60), backgroundColor: '#ebb4b4', alignItems: 'center', justifyContent: 'center', borderRadius: Px(30)}}>
                            <Text>提交</Text>
                        </View>
                    </TouchableOpacity>
                    </ScrollView>
                </TouchableOpacity> 
            </SafeAreaView>
        )
    }

    _addPet() {
        if (this.state.name.length === 0 ||
            this.state.type.length === 0 ||
            this.state.breed.length === 0 ||
            this.state.age.length === 0 ||
            this.state.birthday.length === 0 ||
            this.state.description.length === 0 ||
            this.state.tag.length === 0) {
                console.log('test');
                
                Toast.fail('请填写完整')
                return;
            }
        http://eevee.petpika.cn/pet/add?uid=2&pname=te3&cat=c24&gender=3&age=2&image=urlyyy2&profile=p24&borthtime=1980-06-02&background=123dt
            // 添加宠物API
            const data = {
                uid: this.props.user.id,
                pname: this.state.name,
                cat: this.state.type,
                gender: this.state.breed,
                age: this.state.birthday,
                image: null,
                prifile: this.state.tag,

            }
            actionUtil(ActionTypes.API_ADD_PET, { data })
    }

    _selectImage() {
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if(response.didCancel) {
                console.log('User cancelled image picker');
            } else if(response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if(response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                const source = { uri: response.uri };
                // const data = {
                //     type: 1,
                //     pid: 1,
                //     upload: response.uri
                // }
                // actionUtil(ActionTypes.API_CHANGE_PET_IMAGE, { data })
            }
        })
    }


}

const styles = StyleSheet.create({
    petImage: {
        width: Px(160),
        height: Px(160)
    },
    lineItem: {
        width: '100%',
        flexDirection: 'row',
        height: Px(60),
        alignItems: 'center',
        paddingHorizontal: Px(24)
    },
    inputStyle: {
        flex: 1,
        marginLeft: Px(24),
    }
})

export default connect(state => ({
    user: state.user.user
})
)(AddPet)